<template>
    <div id="bucket-sort-container">

        <div id="bucket-sort-header">
            <h1>桶排序</h1>
        </div>

        <div id="bucket-sort-content">

            <div id="algoControlSection">
                <!-- Table for buttons to control specific animation (insert/find/etc) -->
                <!-- (filled in by javascript code specific to the animtion) -->
                <table id="AlgorithmSpecificControls"> </table>
            </div>

            <!-- Drawing canvas where all animation is done.  Note:  can be resized in code -->

            <canvas id="canvas" width="1000px" height="500px"></canvas>

            <div id="generalAnimationControlSection">
                <!-- Table for buttons to control general animation (play/pause/undo/etc) -->
                <!-- (filled in by javascript code, specifically AnimationMain.js)  -->

                <table id="GeneralAnimationControls"> </table>
            </div>

        </div>
    </div>
</template>

<script>
import { initCanvas } from "@/components/algorithm/AnimationMain";
import { BucketSort } from "@/components/algorithm/BucketSort";
export default {
    name: "BucketSort",
    components: {},
    data() {
        return {
            currentAlg: null,
        }
    },
    computed: {
    },
    methods: {

    },
    created() {

    },
    mounted() {
        const canvas = this.$el.parentElement.querySelector("#canvas");
        let animManag = initCanvas();
        this.currentAlg = new BucketSort(animManag, canvas.width, canvas.height);
    },
    beforeUnmount() {
    },
}
</script>

<style scoped>
#bucket-sort-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: rgb(175, 186, 196);
    position: relative;
    justify-content: center;
}

#bucket-sort-header {
    position: absolute;
    height: 100px;
}

#bucket-sort-content {
    position: absolute;
    top: 100px;
}
</style>